<template>
  <InnerPageTable ref="treeTable" :config="pageTableConfig">
    <div slot="table-bar">
      <RPButton optType="create" @click="add" />
    </div>
  </InnerPageTable>
</template>
<script>
import LimitEdit from './limitEdit.vue'
export default {
  props: {
    appInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      searchForm: {
        appCode: this.appInfo.appCode,
        routeId: this.appInfo.routeId,
        tenantCode: this.appInfo.tenantCode,
        resource: this.appInfo.resource,
        resourceType: this.appInfo.resourceType
      },
      pageTableConfig: {
        isPage: false,
        action: null,
        resource: null, //default
        customDataProcess: null, //default
        loadDataFn: this.loadData,
        columnsFn: this.generateColumns,
        autoFirst: true //default false
      }
    }
  },
  methods: {
    search(page = 1) {
      this.$refs['treeTable'].load(this.searchForm, page)
    },
    add() {
      new this.$pageModal(
        LimitEdit,
        {
          props: {
            appInfo: this.appInfo
          }
        },
        data => {
          if (data) {
            this.search()
          }
        }
      )
    },
    loadData({ responseProcess, param }) {
      return window.$http.post(`${window.RPConfig.mgt}/api/getFlowRuleByResource`, this.searchForm).then(({ data }) => {
        data.records = data.data
        responseProcess(data)
      })
    },
    generateColumns() {
      return [
        {
          title: this.$t('module.apiManage.APIResource'),
          key: 'resource',
          align: 'left',
          sortable: true
        },
        {
          title: this.$t('module.apiManage.appCode'),
          key: 'appCode',
          align: 'left',
          sortable: true
        },
        {
          title: this.$t('module.apiManage.thresholdType'),
          key: 'grade',
          align: 'left',
          sortable: true,
          render: (h, params) => {
            return h('div', params.row.grade == 1 ? 'QPS' : this.$t('module.apiManage.concurrentThreads'))
          }
        },
        {
          title: this.$t('module.apiManage.threshold'),
          key: 'count',
          align: 'left',
          sortable: true
        },
        {
          title: this.$t('module.apiManage.createTime'),
          key: 'createTime',
          align: 'left',
          sortable: true
        },
        {
          title: this.$t('module.apiManage.updateTime'),
          key: 'updateTime',
          align: 'left',
          sortable: true
        },
        {
          title: this.$t('common.operating'),
          fixed: 'right',
          width: 100,
          render: (h, params) => {
            let operation = [
              {
                type: 'icon',
                icon: 'md-create',
                text: this.$t('common.edit'),
                handle: () => {
                  new this.$pageModal(
                    LimitEdit,
                    {
                      props: {
                        appInfo: this.appInfo,
                        dataInfo: params.row
                      }
                    },
                    data => {
                      if (data) {
                        this.search()
                      }
                    }
                  )
                }
              },
              {
                type: 'icon',
                icon: 'md-trash',
                text: this.$t('common.delete'),
                handle: () => {
                  this.$confirm
                    .warning(this.$t('common.warning.confirmToDelete'))
                    .then(() => {
                      window.$http
                        .post(`${window.RPConfig.mgt}/api/deleteFlowRuleByIds?ids=${params.row.id}`, [params.row.id])
                        .then(response => {
                          this.$message.success({
                            content: this.$t('common.deleteSuccess'),
                            duration: 3
                          })
                          this.search()
                        })
                    })
                    .catch(_ => _)
                }
              }
            ]

            return h('RowTools', {
              props: {
                data: operation
              }
            })
          }
        }
      ]
    }
  }
}
</script>
